<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <com-a>
        <template v-slot:myhead="{uname,age}">
            我是头部内容，姓名是：{{uname}} ，年龄：{{age}}
        </template>
        <slot></slot>
      </com-a>
      <com-b ref="comb"></com-b>
    </div>
  </body>
  <template id="ComA">
    <div>
      {{message}}{{num}}
      <button @click="coma">点击我切换</button>
      <slot 
            name="myhead"
            uname="张三"
            age="20"
            ></slot>
            <slot>我是内容1</slot>
            <slot>我是内容2</slot>
    </div>
  </template>
  <template id="ComB">
    <div>{{message}}</div>
  </template>
  <script src="../../vue.js"></script>
  <script>
    let ComA = {
      template: "#ComA",
      data() {
        return {
          message: "我是coma组件",
          flag: false,
          num: 0,
        };
      },
      methods: {
        coma() {
          this.num++;
          this.$nextTick(() => {
            // console.log(this.$refs.comb.innerHTML);
            this.$parent.$refs.comb.message = "修改了";
            this.flag = !this.flag;
            if (!this.flag) {
              this.$parent.$refs.comb.message = "我是comb组件";
            }
          });
          //   this.$parent.$children[1].message="修改了";
          // this.$parent.$refs.comb.message="修改了"
          // this.flag=!this.flag;
          // if(!this.flag){
          //     this.$parent.$refs.comb.message="我是comb组件"
          // }
        },
      },
    };
    let ComB = {
      template: "#ComB",
      data() {
        return {
          message: "我是comaB件",
        };
      },
    };

    new Vue({
      el: "#app",
      components: {
        ComA,
        ComB,
      },
      data: {
        message: "Vue实例数据",
      },
      methods: {},
    });
  </script>
</html>
